<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

        <!-- bootstrap -->
        <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
        <!-- x-editable (bootstrap version) -->
        <link href="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.4.6/bootstrap-editable/css/bootstrap-editable.css" rel="stylesheet">

        <!-- table -->
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
        <script src="http://vitalets.github.io/angular-xeditable/dist/js/xeditable.js"></script>
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
        <script src="http://vitalets.github.io/angular-xeditable/dist/css/xeditable.css"></script>
        <script src="https://code.angularjs.org/1.0.8/angular-mocks.js"></script>
        <!-- end table -->

        <!-- main.js -->
        <script src="main.js"></script>
        <!-- hidentd_intable.css -->
        <link href="hidentd_intable.css" rel="stylesheet">
    </head>

    <body>
        <%-- Static navbar --%>
        <link href=header.jsp" rel="stylesheet">  
        <%-- the end Static navbar --%>

        <div style="margin: auto" class="table-responsive">

            <div ng-app="app" ng-controller="Ctrl">
                <h1 style="margin: 60px auto"> Manger bai viet </h1>
                <table class="table table-bordered table-hover table-condensed">
                    <tr style="font-weight: bold">
                        <td style="width:15%">STT</td>
                        <td style="width:35%">Ten bai viet</td>
                        <td style="width:45%">Noi dung bai viet</td>
                        <td style="width:25%">Nguoi viet</td>
                        <td style="width:25%">Thoi gian</td>
                        <td style="width:25%">Edit</td>
                    </tr>
                    <tr ng-repeat="user in users">
                        <td>
                            <!-- editable STT (text with validation) -->
                            <span editable-text="user.stt" e-name="name" e-form="rowform" onbeforesave="checkName($data, user.id)" e-required>
                                {{ user.stt || 'empty' }}
                            </span>
                        </td>
                        <td>
                            <!-- editable Ten bai viet (text with validation) -->
                            <span editable-text="user.namepost" e-name="name" e-form="rowform" onbeforesave="checkName($data, user.id)" e-required>
                                {{ user.namepost || 'empty' }}
                            </span>
                        </td>
                        <td>
                            <!-- editable Noi dung bai viet (text with validation) -->
                            <span editable-text="user.post" e-name="name" e-form="rowform" onbeforesave="checkName($data, user.id)" e-required>
                                {{ user.post || 'empty' }}
                            </span>
                        </td>
                        <td>
                            <!-- editable Nguoi viet (text with validation) -->
                            <span editable-text="user.person" e-name="name" e-form="rowform" onbeforesave="checkName($data, user.id)" e-required>
                                {{ user.person || 'empty' }}
                            </span>
                        </td>
                        <td>
                            <!-- editable Thoi gian (text with validation) -->
                            <span editable-text="user.time" e-name="name" e-form="rowform" onbeforesave="checkName($data, user.id)" e-required>
                                {{ user.time || 'empty' }}
                            </span>
                        </td>

                        <td style="white-space: nowrap">
                            <!-- form -->
                            <form editable-form name="rowform" onbeforesave="saveUser($data, user.id)" ng-show="rowform.$visible" class="form-buttons form-inline" shown="inserted == user">
                                <button type="submit" ng-disabled="rowform.$waiting" class="btn btn-primary">
                                    save
                                </button>
                                <button type="button" ng-disabled="rowform.$waiting" ng-click="rowform.$cancel()" class="btn btn-default">
                                    cancel
                                </button>
                            </form>
                            <div class="buttons" ng-show="!rowform.$visible">
                                <button class="btn btn-primary" ng-click="rowform.$show()">edit</button>
                                <button class="btn btn-danger" ng-click="removeUser($index)">del</button>
                            </div>  
                        </td>
                    </tr>
                </table>
                <button class="btn btn-default" ng-click="addUser()">Add row</button>

                <%-- thanh dem so--%>
                <nav>
                    <ul class="pagination">
                        <li><a href="#"><span aria-hidden="true">&laquo;</span><span class="sr-only">Previous</span></a></li>
                        <li class="active"><a href="#">1</a></li>
                        <li><a href="#">2</a></li>
                        <li><a href="#">3</a></li>
                        <li><a href="#">4</a></li>
                        <li><a href="#">5</a></li>
                        <li><a href="#"><span aria-hidden="true">&raquo;</span><span class="sr-only">Next</span></a></li>
                    </ul>
                </nav>    
                <%-- ket thuc thanh dem so --%>
                <button class="btn btn-default">Go</button> 
            </div> 


    </body>
</html>

<%-- 
http://vitalets.github.io/x-editable/demo.html?c=popup#
http://jsfiddle.net/NfPcH/93/
--%>